Skip to main content

Introduction

H5 Integration​

H5 integration enables businesses to integrate Telebirr's payment gateway into their mobile applications using HTML5 technology. This integration option is ideal for businesses that want to provide their customers with a seamless payment experience within their mobile apps.

H5 Integration Process

User experience​

H5 Integration Process

Service Flow​

App H5 Payment refers that H5 page integrates with the consumer APP. The consumer needs to open the H5 page and complete payment in SuperApp

Quick Steps:

  1. Open the merchant H5 Page (clicking the embedded page button) in SuperApp
  2. Confirm the order and jump to the payment page in SuperApp
  3. Input PIN in SuperApp
  4. Payment success and the system will notify the result to merchant H5 page

Work Flow​

Service Flow of H5 integration

Main interaction​

  1. The user clicks the merchant H5 menu in the SuperApp, and the SuperApp loads the merchant H5 page and displays.
  2. The user completes the order on the merchant H5 page and confirms the payment.
  3. After receiving the order request, the merchant server applies for a fabric token and invokes the SuperApp (SuperApp payment server) unified order interface (order creation) to create a prepaid order.
  4. The payment server Return prepaid order info (prepay_id) to merchant server
  5. The merchant server groups and joins the payment parameters (prepay id, merch order id, sign, order info, etc.) to construct rawRequest.
  6. The merchant server returns the rawRequest to the merchant H5.
  7. Merchant H5 page calls SuperApp payment JS script to pull up checkout counter and directly transmit the payment parameters that are sent by the merchant server.
  8. The user confirms the order and enters a password to authorize payment.
  9. SuperApp payment server Verifying authorization and completing order payment
  10. If the payment is successful, the SuperApp server asynchronously notifies the Merchant Server payment result.
  11. The user completes the payment or cancels the payment at the SuperApp checkout counter and returns to the merchant H5 page (the default is to return the payment initiation page). The Merchant Server determines whether the payment result notification from MobilePayment is received. If not, the Merchant Server calls the SuperApp order inquiry interface (queryorder) to confirm the order status.
  12. The merchant ships and displays the final order payment result to the user.

You can follow the step by stpe guide to understand the payment apis​